<template>
  <div>
    <pageMain padding="0px" v-loading="pageLoading">
      <div class="overall-table-screen-options">
        <div class="overall-table-screen-options-left">
          <ul class="overall-table-screen-options-left-ul">
            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                名称
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-input
                  size="mini"
                  v-model="pageData.where.username"
                  placeholder="请输入搜索字典"
                ></el-input>
              </div>
            </li>
            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                Name
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-input
                  size="mini"
                  v-model="pageData.where.username"
                  placeholder="请输入搜索Name"
                ></el-input>
              </div>
            </li>

            <li class="overall-table-screen-options-left-ul-li">
              <div class="overall-table-screen-options-left-ul-li-key">
                状态
              </div>
              <div class="overall-table-screen-options-left-ul-li-value">
                <el-select
                  size="mini"
                  v-model="pageData.where.reliable"
                  placeholder="字典状态"
                >
                  <el-option
                    v-for="state in $dictionary.get('DICTIONARY_STATE')"
                    :label="state.label"
                    :value="state.value"
                    :key="state.value"
                  ></el-option>
                </el-select>
              </div>
            </li>
          </ul>
        </div>

        <ul
          class="overall-table-screen-options-right overall-table-screen-options-right-row"
        >
          <li
            class="overall-table-screen-options-right-li"
            @click="clickSearch"
          >
            <el-button size="mini" plain type="primary" icon="el-icon-search"
              >搜索</el-button
            >
          </li>
          <li class="overall-table-screen-options-right-li" @click="clickReset">
            <el-button size="mini" plain type="primary" icon="el-icon-refresh"
              >重置</el-button
            >
          </li>
        </ul>
      </div>

      <div class="overall-table-surround">
        <div class="overall-table-surround-options">
          <div class="overall-table-surround-options-left">
            <el-button size="mini" plain type="warning" icon="el-icon-refresh"
              >全选</el-button
            >
            <el-button size="mini" plain type="danger" icon="el-icon-refresh"
              >批量删除</el-button
            >
          </div>
          <div class="overall-table-surround-options-right">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="clickAddDic"
              >添加字典</el-button
            >
          </div>
        </div>
        <div class="overall-table-surround-table">
          <el-table
            :size="tableSize"
            :border="tableBorder"
            :data="dictionaryList"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="title" label="字典名称" width="140">
            </el-table-column>
            <el-table-column prop="name" label="Name" width="180">
              <template slot-scope="scope">
                <el-link
                  type="success"
                  size="mini"
                  plain
                  @click="copyValue(scope.row.name)"
                  >{{ scope.row.name }}</el-link
                >
              </template>
            </el-table-column>
            <el-table-column prop="count" align="center" label="内容数量">
              <template slot-scope="scope">
                <el-tag size="mini" plain>{{ scope.row.count }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="create_date" label="创建时间" width="140">
            </el-table-column>
            <el-table-column prop="update_date" label="更新时间" width="140">
            </el-table-column>
            <el-table-column prop="comment" label="备注" width="180">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                {{ $dictionary.extend("DICTIONARY_STATE", scope.row.state) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="state"
              label="操作"
              fixed="right"
              align="center"
              width="190"
            >
              <template slot-scope="scope">
                <div class="overall-flex overall-table-options">
                  <el-link
                    type="primary"
                    size="mini"
                    plain
                    @click="clickValuesList(scope.row)"
                    >查看字典</el-link
                  >
                  <el-link
                    type="danger"
                    size="mini"
                    plain
                    :disabled="scope.row.update"
                    @click="clickEdit(scope.row)"
                    >编辑</el-link
                  >
                  <el-link
                    type="danger"
                    size="mini"
                    plain
                    :disabled="scope.row.remove"
                    @click="clickRemove(scope.row)"
                    >删除</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="overall-table-pagination">
        <div class="overall-table-pagination-left">
          <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="overall-table-pagination-right">
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </pageMain>

    <!-- 新增字典弹窗 -->
    <el-dialog
      width="30%"
      :title="dicDialogTitle"
      :modal-append-to-body="false"
      :visible.sync="addDictionaryDialogShow"
    >
      <el-form
        ref="form"
        :model="addDicForm"
        label-width="130px"
        label-position="left"
      >
        <el-form-item label="字典名称">
          <el-input
            v-model="addDicForm.title"
            placeholder="请输入字典名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="字典Name">
          <el-input v-model="addDicForm.name" placeholder="唯一Name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addDicForm.comment"></el-input>
        </el-form-item>
        <el-form-item label="允许修改">
          <el-switch
            v-model="addDicForm.update"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="允许删除">
          <el-switch
            v-model="addDicForm.remove"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <templates slot="footer">
        <el-button @click="cancelAddDic">取消</el-button>
        <el-button type="primary" @click="sumbitAddDic">{{
          dicDialogSumbitTitle
        }}</el-button>
      </templates>
    </el-dialog>

    <!-- 字典内容列表弹窗 -->
    <el-dialog
      width="60%"
      :title="currentDictionaryTitle"
      :modal-append-to-body="false"
      :visible.sync="dictionaryValueDialogShow"
    >
      <div>
        <el-button @click="clickAddDicValue">添加数据</el-button>
      </div>

      <div class="dictionary-info">
        <el-table :data="dictionaryValue">
          <el-table-column prop="label" label="数据" align="left" fixed="left">
          </el-table-column>
          <el-table-column
            prop="value"
            width="90"
            label="value"
            align="center"
            fixed="left"
          >
          </el-table-column>

          <el-table-column
            prop="create_date"
            label="创建时间"
            width="190px"
          ></el-table-column>

          <el-table-column
            prop="update_date"
            label="更新时间"
            width="190px"
          ></el-table-column>

          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="overall-flex overall-table-options">
                <el-link
                  type="danger"
                  size="mini"
                  plain
                  :disabled="!scope.row.update"
                  @click="clickUpdateDicValue(scope.row)"
                  >修改</el-link
                >
                <el-link
                  type="danger"
                  size="mini"
                  plain
                  :disabled="!scope.row.remove"
                  @click="removeDicValueButton(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 修改字典内容弹窗 -->
      <el-dialog
        width="30%"
        :title="valueDialogTitle"
        :visible.sync="updateDicValueDialogShow"
        append-to-body
      >
        <el-form
          ref="form"
          :model="valueForm"
          label-width="130px"
          label-position="left"
        >
          <el-form-item label="label">
            <el-input v-model="valueForm.label" placeholder="label"></el-input>
          </el-form-item>
          <el-form-item label="value">
            <el-input v-model="valueForm.value" placeholder="value"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="valueForm.comment"></el-input>
          </el-form-item>
          <el-form-item label="允许修改">
            <el-switch
              v-model="addDicForm.update"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="允许删除">
            <el-switch
              v-model="addDicForm.remove"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>

        <templates slot="footer">
          <el-button @click="cancelAddDic">取消</el-button>
          <el-button type="primary" @click="sumbitValue">{{
            valueDialogSumbitTitle
          }}</el-button>
        </templates>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
// 数据字典数据操作模块
import dictionaryModule from "@/assets/overall/js/module/dictionary";
import dictionaryAPI from "@/api/dictionary";
import pageMain from "~/page-main/page-main.vue";
import copyMixin from "@/mixins/copy";
import tableAttrMixin from "@/mixins/table_attr";
import loadingMixin from "@/mixins/loading";
export default {
  mixins: [copyMixin, tableAttrMixin, loadingMixin],

  components: { pageMain },

  computed: {
    dicDialogTitle() {
      if (this.DicMode == 1) {
        return "添加字典";
      } else {
        return "编辑字典";
      }
    },
    dicDialogSumbitTitle() {
      if (this.DicMode == 1) {
        return "立即创建";
      } else {
        return "保存";
      }
    },

    valueDialogTitle() {
      if (this.DicValueMode == 1) {
        return "新增数据";
      } else {
        return "修改数据";
      }
    },

    valueDialogSumbitTitle() {
      if (this.DicValueMode == 1) {
        return "立即创建";
      } else {
        return "保存";
      }
    },
  },

  data() {
    return {
      pageData: {
        where: {},
        page: 1,
        limit: 10,
        list: [],
      },
      // 当前字典模式
      DicMode: 1, // 1:添加   2：编辑
      // 当前字典内容模式
      DicValueMode: 1, // 1:添加   2：编辑
      // 修改字典内容弹窗状态
      updateDicValueDialogShow: false,
      // 新增/修改字典弹窗状态
      addDictionaryDialogShow: false,
      // 字典内容列表弹窗状态
      dictionaryValueDialogShow: false,
      // 字典列表
      dictionaryList: [],
      // 字典内容列表
      dictionaryValue: [],
      // 当前选择的字典标题
      currentDictionaryTitle: "",
      // 当前选择的字典id
      currendDic: null,
      // 当前选择的字典内容id
      currentValue: null,
      // 当前选择的字典内容名称
      currentValueTitle: "",
      // 新增/修改字典表单
      addDicForm: {
        title: "",
        name: "",
        comment: "",
        update: true,
        remove: true,
      },
      dicForm: {
        title: "",
        name: "",
        comment: "",
        update: true,
        remove: true,
      },
      // 修改、新增字典变淡
      valueForm: {
        label: "",
        value: "",
        state: "",
        update: true,
        remove: true,
        comment: "",
      },
    };
  },
  created() {
    this.getDistionaryData();
  },

  watch: {
    dictionaryValueDialogShow(newVal) {
      if (!newVal) {
        this.getDistionaryData();
      }
    },

    addDictionaryDialogShow(newVal) {
      if (!newVal) {
        this.addDicForm.title = "";
        this.addDicForm.name = "";
        this.addDicForm.comment = "";
      }
    },
    updateDicValueDialogShow(newVal) {
      if (!newVal) {
        this.valueForm.label = null;
        this.valueForm.value = null;
        this.valueForm.comment = null;
        this.valueForm.update = true;
        this.valueForm.remove = true;
      }
    },
  },

  methods: {
    // 点击查询
    clickSearch() {
      this.pageData.page = 1;
      this.getDistionaryData();
    },
    clickReset() {
      this.pageData.page = 1;
      for (let item of Object.keys(this.pageData.where)) {
        this.pageData.where[item] = null;
      }
      this.getDistionaryData();
    },
    // 点击添加字典数据
    clickAddDicValue() {
      this.DicValueMode = 1;
      this.updateDicValueDialogShow = true;
    },
    // 点击修改字典数据
    clickUpdateDicValue(row) {
      this.DicValueMode = 2;
      let { id, label, value, update, remove, comment, state } = row;
      this.currentValue = id;
      this.valueForm = {
        label,
        value,
        update,
        remove,
        comment,
        state,
      };
      this.updateDicValueDialogShow = true;
    },
    // 点击删除字典内容
    clickRemoveDicValue(row) {
      console.log(row);
    },
    // 点击添加字典
    clickAddDic() {
      this.DicMode = 1;
      this.addDictionaryDialogShow = true;
    },
    cancelAddDic() {
      this.addDictionaryDialogShow = false;
    },

    sumbitValue() {
      if (this.DicValueMode == 1) {
        // 添加
        // 字典id
        let dic_id = this.currendDic;

        // label
        let label = this.valueForm.label;
        // value
        let value = this.valueForm.value;
        // 备注
        let comment = this.valueForm.comment;
        // 允许修改
        let update = this.valueForm.update;
        // 允许删除
        let remove = this.valueForm.remove;

        // 发送请求
        dictionaryAPI
          .addDictionaryValue({ dic_id, label, value, comment, update, remove })
          .then((res) => {
            let { msg } = res;
            this.$message({
              message: msg,
              type: "success",
            });
            this.updateDicValueDialogShow = false;
            this.getDicValueList();
          })
          .catch((err) => {
            console.log(err);
            let { msg } = err;
            this.$message({
              message: msg,
              type: "error",
            });
          });
      } else if (this.DicValueMode == 2) {
        // 字典id
        let dic_id = this.currendDic;
        // 数据id
        let id = this.currentValue;
        // label
        let label = this.valueForm.label;
        // value
        let value = this.valueForm.value;
        // 备注
        let comment = this.valueForm.comment;
        // 允许修改
        let update = this.valueForm.update;
        // 允许删除
        let remove = this.valueForm.remove;
        dictionaryAPI
          .updateDictionaryValue({
            dic_id,
            remove,
            update,
            id,
            label,
            value,
            comment,
          })
          .then((res) => {
            let { msg } = res;
            this.$message({
              message: msg,
              type: "success",
            });
            this.updateDicValueDialogShow = false;
            this.getDicValueList();
          })
          .catch((err) => {
            let { msg } = err;
            this.$message({
              message: msg,
              type: "error",
            });
          });
      }
    },

    // 添加字典
    addDictionary() {
      dictionaryAPI
        .addDictionary(this.addDicForm)
        .then((res) => {
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
          this.cancelAddDic();
          this.getDistionaryData();
        })
        .catch((err) => {
          let { msg } = err;
          this.$message.error(msg);
        });
    },
    // 更新字典
    updateDictionary() {
      let id = this.currendDic;
      let { name, title, comment } = this.addDicForm;

      dictionaryAPI
        .updateDictionary({
          id,
          name,
          title,
          comment,
        })
        .then((res) => {
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
          this.cancelAddDic();
          this.getDistionaryData();
        })
        .catch((err) => {
          let { msg } = err;
          this.$message.error(msg);
        });
    },
    // 点击添加/删除字典按钮
    sumbitAddDic() {
      if (this.DicMode == 1) {
        this.addDictionary();
      } else if (this.DicMode == 2) {
        this.updateDictionary();
      }
    },

    // 点击删除字典内容
    removeDicValueButton(row) {
      let { id } = row;
      dictionaryAPI.RemoveDictionaryValue({ id }).then((res) => {
        let { msg } = res;
        this.$message({
          message: msg,
          type: "success",
        });
        this.getDicValueList();
      });
    },

    getDistionaryData() {
      this.pageLoading = true;

      let { page, limit, where } = this.pageData;

      dictionaryAPI
        .dictionaryList({
          page,
          limit,
          where,
        })
        .then((res) => {
          let data = res.data;
          this.dictionaryList = data;
          return dictionaryAPI.treeList();
        })
        .then((dictionaryTree) => {
          const dictionaryTreeList = dictionaryTree.data;
          dictionaryModule.setDictionaryList(dictionaryTreeList);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },
    // 点击编辑字典
    clickEdit(row) {
      this.currendDic = row.id;
      this.DicMode = 2;
      this.addDictionaryDialogShow = true;
      this.addDicForm.title = row.title;
      this.addDicForm.name = row.name;
      this.addDicForm.comment = row.comment;
    },
    // 点击删除字典
    clickRemove(row) {
      let { id } = row;
      this.removeDic(id);
    },
    // 删除字典
    removeDic(id) {
      dictionaryAPI
        .RemoveDictionary({ id })
        .then((res) => {
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
          this.getDistionaryData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除字典内容
    clickRemoveValue(row) {
      dictionaryAPI
        .RemoveDictionaryValue({
          dic: row.dic_id,
          id: row.id,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击字典列表
    clickValuesList(row) {
      let { id, title } = row;
      this.currendDic = id;
      this.currentDictionaryTitle = title;
      this.getDicValueList();
    },
    // 获取字典内容列表
    getDicValueList() {
      let dic_id = this.currendDic;
      dictionaryAPI
        .dictionaryValueList({ dic_id })
        .then((res) => {
          let data = res.data;
          this.dictionaryValue = data;

          this.dictionaryValueDialogShow = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新增字典内容
    addDicValue() {
      let dic_id = this.currendDic;
      let label = this.addDictionaryValueForm.label;
      let value = this.addDictionaryValueForm.value;
      dictionaryAPI
        .addDictionaryValue({ dic_id, label, value })
        .then((res) => {
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
          this.getDicValueList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.table-option {
  justify-content: space-between;
}
.table-search {
  width: 300px;
  height: 35px;
  border-radius: 20px;
  border: 1px solid #c3c3c3;
}

.dictionary-add-value {
  height: 100px;
  display: flex;
  align-items: center;
}
</style>
